<template>
  <div class="order-container">
    <template>
      <el-table
        :data="orderData"
        :row-key="row => row._id"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="orderDetail"
          align="center"
          label="产品图片"
          width="130"
        >
          <!-- 插槽作用域 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="scope.row.orderDetail[0].imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_id"
          align="center"
          label="订单编号"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="orderDetail[0].productName"
          align="center"
          label="产品名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="orderDetail[0].quantity"
          width="100"
          align="center"
          label="数量"
        >
        </el-table-column>
        <el-table-column
          prop="total_fee"
          width="100"
          align="center"
          label="总价格"
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          align="center"
          width="180"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="pay_status"
          width="100"
          align="center"
          label="支付状态"
        >
          <template v-slot="{ row }">
            {{ row.pay_status === 1 ? '已支付' : '未支付' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="order_status"
          width="100"
          align="center"
          label="订单状态"
        >
          <template v-slot="{ row }">
            <span v-if="row.order_status == 0">未提交</span>
            <span v-else-if="row.order_status == 1">提交成功</span>
            <span v-else-if="row.order_status == 2">已经取消</span>
            <span v-else-if="row.order_status == 3">无效订单</span>
            <span v-else-if="row.order_status == 4">交易关闭</span>
            <span v-else-if="row.order_status == 5">退货</span>
          </template>
        </el-table-column>
        <el-table-column prop="opration" align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              v-hasPay="[row.pay_status, row.order_status]"
              icon="iconfont icon-chongzhi"
              @click="toPay(row.order_id)"
            >
              去支付
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="del(row.order_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import * as payApi from '@/api/pay'
export default {
  meta: {
    title: 'order',
    icon: 'iconfont icon-dd' //存菜单对应的图标的类名
  },
  async mounted() {
    let res = await payApi.getOrder()
    console.log(res)
    this.orderData = res.data.data
  },
  directives: {
    hasPay: {
      inserted(el, binding) {
        // console.log(binding)
        //指令接收的是用户的支付状态
        //0未支付 显示去支付按钮
        //1已支付 禁用去支付按钮
        //接收到的参数是一个数组 [pay_status,order_status]
        let [pay_status, order_status] = binding.value
        //先保存当前按钮的类名
        let className = el.className
        //当pay_status不是0 的时候
        //order_status不是1的时候
        //禁用按钮
        //order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
        if (pay_status !== 0 || order_status !== 1) {
          el.disabled = true //禁用按钮
          el.className = className + ' ' + 'is-disabled'
          el.innerHTML = '订单已超时'
        }
      }
    }
  },
  data() {
    return {
      orderData: []
    }
  },
  methods: {
    async toPay(order_id) {},
    del(order_id) {
      this.$confirm('确定删除这条订单信息么', '删除订单提示', {
        type: 'warning'
      })
        .then(async () => {
          // 确定 删除
          let res = await payApi.delOrder(order_id)
          // console.log(res)
          let { state } = res.data
          if (state) {
            // 删除成功
            this.$message.success('已成功删除该订单')
            // 重新请求数据刷新页面
            let res = await payApi.getOrder()
            this.orderData = res.data.data
          }
        })
        .catch(() => {
          // 点击了取消按钮
          this.$message.error('已取消删除')
        })
    }
  }
}
</script>

<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
</style>
